<template>
  <div class="flex breadcrumb items-center justify-center">
    <div
      v-for="(item, index) in data"
      :key="index"
      :class="{ active: item.active }"
      class="text-14px text-white opacity-60 mr-8px cursor-pointer"
      @click="go(item)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const data = computed(() => {
  const match = route.matched
  return match
    .filter((m) => m?.meta?.title)
    .reduce((prev: any[], cur, index, arr) => {
      if (index === arr.length - 1) {
        prev.push({
          title: cur.meta.title,
          active: true,
          path: cur.path
        })
      } else {
        prev.push({
          title: cur.meta.title,
          active: false,
          path: cur.path
        })
        prev.push({
          title: '>',
          active: index === arr.length - 2
        })
      }
      return prev
    }, [])
})

const go = (item) => {
  // @todo 确认离开收银台
  router.replace(item.path)
}
</script>

<style scoped>
.breadcrumb .active {
  opacity: 1;
  cursor: auto;
}
</style>
